import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入侧边栏菜单插件
import subMenu from "qf-sub-menu"
//引入基础样式
import "@/assets/css/base.css"
import "@/assets/css/el-rest.css"
//引入进度条
import nprogress from "nprogress"
//引入进度条css文件
import "nprogress/nprogress.css"

Vue.use(subMenu)
Vue.use(ElementUI);
Vue.config.productionTip = false;

//自定义鉴权指令
Vue.directive("has",{
  inserted(el,binding){
    // console.log(el);
    // console.log(binding);
    //本地取出用户的按钮权限
    let permission = localStorage.getItem("permissionButtons") || "[]"
    permission = JSON.parse(permission)
    //和绑定值比较判断是否有权限
    if(!permission.includes(binding.value)){
      //添加新类名 触发禁用按钮的样式
      let ElclassName = el.className
      el.className = ElclassName + "" + "is-disabled"
      //上面的两行代码只是为了改变elementUI按钮元素的样式is-disabled
      //实现禁用
      el.disabled = true
    }else{

    }
  },
  bind(){

  },
  update(){

  }
})

//使用全局路由守卫判断本地是否有token
//有就放行，没有跳转到登陆页面
//出了登录页其它的页面在未登陆的情况下不能访问
router.beforeEach((to,from,next)=>{
  nprogress.start()
  let token = localStorage.getItem("qf-token") || ""
  if(token){
    //获取用户菜单
    //先判断store中sideMenu是否为[]
    if(store.state.sideMenu.length === 0){
      store.dispatch("GET_MENULIST")
      .then(()=>{
        next({path:to.path})//放行
      })
    }else{
      next()
    }
  }else{
    if(to.path!=="/login"){
      //跳转登录页
      next({path:"/login"})
    }else{
      next()
    }
  }
})
//全局的后置钩子
router.afterEach((to, from) => {
  nprogress.done()
  let matched = [...to.matched]
  matched.splice(0,1)
  store.commit("SET_BREADCRUMB",matched)
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
